<route>
  {
    meta:{
      title:'排行榜'
    }
  }
</route>
<template>
  <div class="top">
    <div class="max-w">
      <!-- <div class="small">ABOUT ENTERPRISE INTRODUCTION</div>
      <div class="big">在CYDON GAME</div> -->
      <div class="big">{{ $t("common.showOffYourAchievements") }}</div>
    </div>
  </div>
  <div class="rank-mobile">
    <!-- <div class="tab-wrap">
      <div class="tab-item">{{ $t("common.store") }}</div>
      <div class="tab-item">{{ $t("common.gloabal") }}</div>
      <div class="tab-item">{{ $t("common.game") }}</div>
    </div> -->
    <img class="star" src="@/assets/image/rankS.png" alt="" v-if="show" />
    <img class="star" src="@/assets/image/rankSa.png" alt="" v-else />
    <div class="block">
      <div class="one">
        <div class="title">
          {{ $t("common.store") }}
        </div>
        <div
          :class="index % 2 === 0 ? 'line odd' : 'line even'"
          v-for="(item, index) in storeArr"
          :key="index"
        >
          <div class="num" v-if="index > 2">{{ index + 1 }}</div>
          <img
            v-if="index === 0"
            class="numI"
            src="@/assets/image/num1.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 1"
            class="numI"
            src="@/assets/image/num2.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 2"
            class="numI"
            src="@/assets/image/num3.png"
            alt=""
            srcset=""
          />
          <div class="name">{{ item.nickname }}</div>
          <div class="count">{{ item.score }}</div>
        </div>
      </div>
      <div class="one">
        <div class="title">
          {{ $t("common.gloabal") }}
        </div>
        <div
          :class="index % 2 === 0 ? 'line odd' : 'line even'"
          v-for="(item, index) in gloabalArr"
          :key="index"
        >
          <div class="num" v-if="index > 2">{{ index + 1 }}</div>
          <img
            v-if="index === 0"
            class="numI"
            src="@/assets/image/num1.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 1"
            class="numI"
            src="@/assets/image/num2.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 2"
            class="numI"
            src="@/assets/image/num3.png"
            alt=""
            srcset=""
          />
          <div class="name">{{ item.nickname }}</div>
          <div class="count">{{ item.score }}</div>
        </div>
      </div>
      <div class="one">
        <div class="title">
          {{ $t("common.game") }}
        </div>
        <div
          :class="index % 2 === 0 ? 'line odd' : 'line even'"
          v-for="(item, index) in gameArr"
          :key="index"
        >
          <div class="num" v-if="index > 2">{{ index + 1 }}</div>
          <img
            v-if="index === 0"
            class="numI"
            src="@/assets/image/num1.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 1"
            class="numI"
            src="@/assets/image/num2.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 2"
            class="numI"
            src="@/assets/image/num3.png"
            alt=""
            srcset=""
          />
          <div class="name">{{ item.game_name }}</div>
          <div class="count">{{ item.count }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="rank">
    <img class="star" src="@/assets/image/rankS.png" alt="" v-if="show" />
    <img class="star" src="@/assets/image/rankSa.png" alt="" v-else />
    <div class="block">
      <div class="one">
        <div class="title">
          {{ $t("common.store") }}
        </div>
        <div
          :class="index % 2 === 0 ? 'line odd' : 'line even'"
          v-for="(item, index) in storeArr"
          :key="index"
        >
          <div class="num" v-if="index > 2">{{ index + 1 }}</div>
          <img
            v-if="index === 0"
            class="numI"
            src="@/assets/image/num1.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 1"
            class="numI"
            src="@/assets/image/num2.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 2"
            class="numI"
            src="@/assets/image/num3.png"
            alt=""
            srcset=""
          />
          <div class="name">{{ item.nickname }}</div>
          <div class="count">{{ item.score }}</div>
        </div>
      </div>
      <div class="one">
        <div class="title">
          {{ $t("common.gloabal") }}
        </div>
        <div
          :class="index % 2 === 0 ? 'line odd' : 'line even'"
          v-for="(item, index) in gloabalArr"
          :key="index"
        >
          <div class="num" v-if="index > 2">{{ index + 1 }}</div>
          <img
            v-if="index === 0"
            class="numI"
            src="@/assets/image/num1.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 1"
            class="numI"
            src="@/assets/image/num2.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 2"
            class="numI"
            src="@/assets/image/num3.png"
            alt=""
            srcset=""
          />
          <div class="name">{{ item.nickname }}</div>
          <div class="count">{{ item.score }}</div>
        </div>
      </div>
      <div class="one">
        <div class="title">
          {{ $t("common.game") }}
        </div>
        <div
          :class="index % 2 === 0 ? 'line odd' : 'line even'"
          v-for="(item, index) in gameArr"
          :key="index"
        >
          <div class="num" v-if="index > 2">{{ index + 1 }}</div>
          <img
            v-if="index === 0"
            class="numI"
            src="@/assets/image/num1.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 1"
            class="numI"
            src="@/assets/image/num2.png"
            alt=""
            srcset=""
          />
          <img
            v-if="index === 2"
            class="numI"
            src="@/assets/image/num3.png"
            alt=""
            srcset=""
          />
          <div class="name">{{ item.game_name }}</div>
          <div class="count">{{ item.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { storeRank, globalRank, gameRank } from "./ranking.service";
import { useUserStore } from "@/store/index";

const userStore = useUserStore();

const show = ref(true);

watch(
  () => userStore.lang,
  (lang, old) => {
    if (!lang) return;
    if (lang === "sa") {
      show.value = false;
    } else {
      show.value = true;
    }
  },
  { immediate: true }
);

const storeArr = ref([]);
const gloabalArr = ref([]);
const gameArr = ref([]);
const getData = () => {
  storeRank().then((res) => {
    storeArr.value = res.data.rank_list;
  });
  globalRank().then((res) => {
    gloabalArr.value = res.data.rank_list;
  });
  gameRank().then((res) => {
    gameArr.value = res.data.rank_list;
  });
};
getData();
</script>
<style lang='scss' scoped>
/* 智能手机（普通手机和宽屏智能手机） */
@media only screen and (max-width: 768px) {
  .rank {
    display: none !important;
  }
  .rank-mobile {
    display: flex !important;
  }
  .star {
    width: 100% !important;
    padding: 2.5rem;
    box-sizing: border-box;
  }
}

/* 平板电脑 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rank {
    display: none !important;
  }
  .rank-mobile {
    display: flex !important;
  }
  .star {
    width: 100% !important;
    padding: 2.5rem;
    box-sizing: border-box;
  }
  .num {
    font-size: 18px !important;
  }
  .numI {
    width: 50px !important;
    height: 50px !important;
  }
  .name {
    font-size: 16px !important;
  }
  .count {
    font-size: 16px !important;
  }
  .title {
    font-size: 20pt !important;
  }
}

.max-w {
  width: 100%;
  max-width: 1440px;
  padding: 0 4rem;
}
.top {
  background-color: var(--theme-color-title-bg);
  padding: 2rem 0rem;
  font-size: 14pt;
  color: #fff;
  display: flex;
  justify-content: center;
  .small {
    font-size: 12pt;
  }
  .big {
    font-size: 24pt;
    font-weight: 600;
  }
}
.star {
  padding: 2.5rem;
  width: 500px;
}
.rank-mobile {
  width: 100%;
  display: none;
  background-image: url("@/assets/image/rankBg.jpg");
  background-size: 100% 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .block {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    .one {
      min-width: 85vw;
      min-height: 120px;
      margin: 20px auto;
      border: 1px solid #fff;
      border-radius: 20px;
      overflow: hidden;
      background-color: var(--theme-color-ranking-bg);
      display: flex;
      flex-direction: column;
      gap: 20px;
      .num {
        font-size: 14px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      .numI {
        width: 40px;
        height: 40px;
      }
      .name {
        font-size: 14px;
        flex: 1;
        text-align: center;
      }
      .count {
        width: 80px;
        text-align: right;
        font-size: 14px;
      }
      .title {
        font-size: 14pt;
        font-weight: 600;
        text-align: center;
        background-image: url("@/assets/image/rankBg1.png");
        background-size: 100% 100%;
        height: 60px;
        line-height: 60px;
        color: #fff;
        letter-spacing: 1.5px;
      }
      .line {
        height: 60px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        color: #fff;
        padding: 0 1.5rem;
        font-size: 14pt;
      }
      .odd {
        background-color: var(--theme-color-ranking-q);
      }
      .even {
        background-color: var(--theme-color-ranking-s);
      }
    }
  }
  // .tab-wrap {
  //   cursor: pointer;
  //   display: flex;
  //   .tab-item {
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     border: 1px solid #fff;
  //     overflow: hidden;
  //     background-color: var(--theme-color-ranking-bg);
  //     color: #fff;
  //     width: 90px;
  //     padding: 2px 10px;
  //     background-image: url("@/assets/image/rankBg1.png");
  //     background-size: 100% 100%;
  //     text-align: center;
  //     font-size: 14px;
  //   }
  //   :nth-child(1){
  //     border-radius: 10px 0 0 10px;
  //   }
  //   :nth-child(3){
  //     border-radius: 0 10px 10px 0;
  //   }
  // }
}
.rank {
  background-image: url("@/assets/image/rankBg.jpg");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8rem;
  .block {
    display: flex;
    justify-content: space-around;
    gap: 4rem;
    width: 100%;
    max-width: 1440px;
    margin-bottom: 2.5rem;
    padding: 0 4rem;
    .one {
      width: calc(calc(100% - 8rem) / 3);
      border: 1px solid #fff;
      border-radius: 20px;
      overflow: hidden;
      background-color: var(--theme-color-ranking-bg);
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 450px;
      .num {
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      .numI {
        width: 50px;
        height: 50px;
      }
      .name {
        flex: 1;
        text-align: center;
      }
      .count {
        width: 80px;
        text-align: right;
      }
      .title {
        font-size: 17pt;
        font-weight: 600;
        text-align: center;
        background-image: url("@/assets/image/rankBg1.png");
        background-size: 100% 100%;
        height: 60px;
        line-height: 60px;
        color: #fff;
        letter-spacing: 3px;
      }
      .line {
        height: 60px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        color: #fff;
        padding: 0 3rem;
        font-size: 14pt;
      }
      .odd {
        background-color: var(--theme-color-ranking-q);
      }
      .even {
        background-color: var(--theme-color-ranking-s);
      }
    }
  }
}
</style>